<template>
  <div class="app-content">
    <h2 class="font-medium mb-5 flex items-end">
      <span class="mr-2.5">测试版本</span>
    </h2>
    <div v-if="row" class="flex justify-between items-center">
      <div>
        <p class="text-gray-500 mb-2.5">版本号</p>
        <p>{{ row.version }}</p>
      </div>
      <div>
        <p><span>发布时间：</span>{{ timestampToTime(row.ctime) }}</p>
        <p class="mt-2.5"><span>项目备注：</span>{{ row.summary }}</p>
      </div>
      <div>
        <el-popover placement="left" title="预览" width="200" trigger="click" class="mr-2.5" @show="onGetDouyinQrcode('latest')">
          <template #default>
            <div v-loading="qrcodeLoading" class="text-center h-45">
              <img :src="qrcode" alt="" width="180" />
            </div>
          </template>
          <template #reference>
            <el-button>预览</el-button>
          </template>
        </el-popover>
        <el-button :loading="loading" type="primary" :disabled="row.has_audit === 1" @click="dialogAuditVisible = true">
          {{ row.has_audit ? '已提审' : '提交审核' }}
        </el-button>
      </div>
    </div>
    <div v-else class="flex items-center justify-center h-25 text-gray-500">暂无审核版本</div>
    <el-dialog v-model="dialogAuditVisible" title="提交审核" width="800px">
      <el-form ref="form" :model="auditData" label-width="80px">
        <el-form-item label="上线设备">
          <el-checkbox-group v-model="auditData.hostNames">
            <el-checkbox label="douyin" name="douyin">抖音</el-checkbox>
            <el-checkbox label="douyin_lite" name="douyin_lite">抖音极速版</el-checkbox>
            <el-checkbox label="toutiao" name="toutiao">头条</el-checkbox>
            <el-checkbox label="tt_lite" name="tt_lite">头条极速版</el-checkbox>
            <el-checkbox label="huoshan" name="huoshan">火山</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="备注信息">
          <el-input v-model="auditData.auditNote" type="textarea" placeholder="本次提审的备注信息" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onAuditDouyinVersion()">提交审核</el-button>
          <el-button @click="dialogAuditVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, inject, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { timestampToTime } from './utils'
import { auditDouyinVersion, getDouyinQrcode } from '@/api/platform/app/douyin_open'

defineOptions({
  name: 'DkDouyinLatestContainer'
})

const props = defineProps({
  row: {
    type: Object,
    default: () => null
  }
})

const emit = defineEmits(['update'])

const loading = ref(false)
const auditData = ref({
  hostNames: ['douyin_lite', 'toutiao', 'douyin', 'huoshan', 'tt_lite'],
  auditNote: ''
})
const dialogAuditVisible = ref(false)
const qrcodeLoading = ref(false)
const qrcode = ref('')
const defaultApp = inject('defaultApp')

const platformAppId = computed(() => {
  return defaultApp.value.id
})

const onAuditDouyinVersion = () => {
  dialogAuditVisible.value = false
  loading.value = true
  auditDouyinVersion(platformAppId.value, auditData.value)
    .then((res) => {
      ElMessage.success('提交成功')
      emit('update')
      loading.value = false
    })
    .catch(() => {
      dialogAuditVisible.value = false
    })
}

const onGetDouyinQrcode = (version) => {
  qrcodeLoading.value = true
  getDouyinQrcode(platformAppId.value, version)
    .then((res) => {
      console.log(res)
      qrcode.value = res.data.qr_code_url
      qrcodeLoading.value = false
    })
    .catch(() => {
      qrcodeLoading.value = false
    })
}
</script>
